<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>setState</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /*
        面试题：this.setState方法是同步还是异步
          既能是同步也能是异步

          在定时器和原生DOM事件中，setState是同步调用的
          在React合成事件和生命周期函数中，setState是异步调用的
            setState传入的是对象：多次调用setState会合并成一次，要更新的数据也会合并成一个
            setState传入的是函数：多次调用setState会合并成一次，要更新的数据都会生效
      */
      class App extends React.Component {
        state = {
          count: 0,
          num: 0,
        };

        // setCount = () => {
        //   // 2
        //   // 多次调用setState会合并成一次，要更新的数据也会合并成一个
        //   this.setState({
        //     count: this.state.count + 1,
        //     // num: 1,
        //   });
        //   console.log(this.state.count); // 0

        //   this.setState({
        //     count: this.state.count + 2,
        //   });
        //   console.log(this.state.count); // 0
        // };

        // setCount = () => {
        //   // 多次调用setState会合并成一次，要更新的数据都会生效
        //   this.setState((oldState) => {
        //     // 返回新state
        //     return {
        //       count: oldState.count + 1,
        //     };
        //   });
        //   console.log(this.state.count); // 0

        //   this.setState((oldState) => {
        //     // 返回新state
        //     return {
        //       count: oldState.count + 2,
        //     };
        //   });
        //   console.log(this.state.count); // 0
        // };

        // setCount = () => {
        //   setTimeout(() => {
        //     // 是同步调用的
        //     this.setState({
        //       count: this.state.count + 1,
        //     });
        //     console.log(this.state.count); // 1

        //     this.setState({
        //       count: this.state.count + 2,
        //     });
        //     console.log(this.state.count); // 3
        //   }, 1000);
        // };

        setCount = () => {
          // 是同步调用的
          this.setState({
            count: this.state.count + 1,
          });
          console.log(this.state.count); // 1

          this.setState({
            count: this.state.count + 2,
          });
          console.log(this.state.count); // 3
        };

        ref = React.createRef();

        componentDidMount() {
          // 原生DOM事件
          this.ref.current.onclick = this.setCount;
        }

        render() {
          console.log("render");
          const { count, num } = this.state;
          return (
            // onClick React合成事件
            // <div onClick={this.setCount} >
            <div ref={this.ref}>
              App...{count} - {num}
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>
